/**
 * @file AboutPage.jsx
 * @description “关于我们”页面组件。
 */
import React from 'react';

const AboutPage = () => {
  return (
    <div className="container my-5 py-5"> {/* 增加上下外边距和内边距 */}
      <div className="row">
        <div className="col-12 mb-4">
          <h1 className="display-5 text-center fw-bold">关于我们</h1>
          <hr />
        </div>
      </div>
      <div className="row justify-content-center">
        <div className="col-md-10 col-lg-8">
          <p className="lead text-center mb-4">
            欢迎来到我们的在线商店！本项目是一个使用现代前端技术栈（包括 React.js、Redux Toolkit、React Router 和 Bootstrap 5）精心构建的电子商务平台演示。
          </p>
          <p className="text-muted">
            我们的目标是创建一个功能丰富、用户友好且具有视觉吸引力的购物体验。通过这个项目，我们希望展示如何构建一个响应式的、可扩展的前端应用程序，它能够处理商品展示、分类筛选、购物车管理、用户认证以及模拟的结算流程。
          </p>
          <p className="text-muted">
            我们从 <a href="https://fakestoreapi.com/" target="_blank" rel="noopener noreferrer">FakeStoreAPI</a> 获取商品数据，这使我们能够专注于前端逻辑和用户界面的实现。项目中广泛使用了 React Hooks 进行状态管理和副作用处理，Redux Toolkit 则负责全局状态（如购物车和用户认证）的高效管理，并通过 localStorage 实现了状态的持久化。
          </p>
          <p className="text-muted">
            无论您是正在学习 React 的开发者，还是希望寻找电商项目实现思路的同仁，都希望这个项目能为您提供有价值的参考和启发。
          </p>
        </div>
      </div>

      <div className="row mt-5">
        <div className="col-12">
          <h2 className="text-center mb-4">我们的产品类别</h2>
        </div>
        {/* 产品类别卡片，可以根据需要调整图片或添加更多类别 */}
        <div className="col-md-3 col-sm-6 mb-4">
          <div className="card h-100 shadow-sm">
            <img
              className="card-img-top p-3"
              src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
              alt="男装"
              style={{ height: '250px', objectFit: 'contain' }}
            />
            <div className="card-body text-center">
              <h5 className="card-title">男装</h5>
            </div>
          </div>
        </div>
        <div className="col-md-3 col-sm-6 mb-4">
          <div className="card h-100 shadow-sm">
            <img
              className="card-img-top p-3"
              src="https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg"
              alt="女装"
              style={{ height: '250px', objectFit: 'contain' }}
            />
            <div className="card-body text-center">
              <h5 className="card-title">女装</h5>
            </div>
          </div>
        </div>
        <div className="col-md-3 col-sm-6 mb-4">
          <div className="card h-100 shadow-sm">
            <img
              className="card-img-top p-3"
              src="https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg"
              alt="珠宝"
              style={{ height: '250px', objectFit: 'contain' }}
            />
            <div className="card-body text-center">
              <h5 className="card-title">珠宝</h5>
            </div>
          </div>
        </div>
        <div className="col-md-3 col-sm-6 mb-4">
          <div className="card h-100 shadow-sm">
            <img
              className="card-img-top p-3"
              src="https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg"
              alt="电子产品"
              style={{ height: '250px', objectFit: 'contain' }}
            />
            <div className="card-body text-center">
              <h5 className="card-title">电子产品</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AboutPage;